import React from 'react'
import store from '../../../store/store'
import logo from '../../../assets/images/搜索.png'
import dele from '../../../assets/images/删除.png'
import loading from '../../../assets/images/loading.gif'
import './container.css'
import Hotkey from './hotkey'
import { getSearch, getSongUrl, getSongLyric} from '../../../api'
class Container extends React.Component {
    constructor() {
        super()
        this.state = {
            isPlay: false,//是否有音频在播放
            value: "",
            data: [],
            search: [],
            songUrl: "",
            singleID: "",
            indexs: "",
            songImg: "",
            songTitle: "",
            songArits: "",
            songId:""
        }
    }
    //获取歌曲id,index,loading,name,artists
    handleGain(id, index, loading, name, ar) {
        this.setState({ singleID: id })
        this.getSongUrlLocal(id)
        this.getSongLy(id)
        store.dispatch({
            type: 'GET_SONGIMG',
            payload: { songImg: loading }
        })
        store.dispatch({
            type: 'GET_SONGTitle',
            payload: { songTitle: name }
        })
        store.dispatch({
            type: 'GET_SONGERNAME',
            payload: { songArits: ar }
        })
        store.dispatch({
            type: 'GET_SONGID',
            payload: { songId: id }
        })
    }
    //通过歌曲id获取歌词
    getSongLy(id) {
        console.log(id)
        getSongLyric(id).then((res) => {
            console.log(res)
            store.dispatch({
                type: 'GET_LYRIC',
                payload: { lyric: res.data.lrc.lyric }
            })
        })
    }
    //请求音乐Url
    getSongUrlLocal(id) {
        getSongUrl(id).then((res) => {
            store.dispatch({
                type: 'GET_SONGURL',
                payload: { songUrl: res.data.data[0].url }
            })
        })
    }
    //请求搜索数据接口
    getSearchkey(val) {
        getSearch(val).then((res) => {
            if (res.data.result.songCount) {
                this.setState({
                    search: res.data.result.songs
                })
            }
        })
    }
    componentWillMount() {
        this.getSearchkey()
        this.getSongUrlLocal()
    }

    //更新输入框内容   
    handle = (e) => {
        this.setState({
            value: e.target.value
        })
        this.getSearchkey(e.target.value)
    }
    callback = (value) => {
        // setState方法,修改value的值,值是由子组件里面传过来的
        this.setState({ value });
        this.getSearchkey(value)
    }
    //点击清空输入框内容
    handleInputClear() {
        this.setState({
            value: ""
        })
    }
    render() {
        let { value, search, songUrl, indexs } = this.state

        //渲染搜索结果
        let searchLis = search.map(({ id, name, artists }, index) => {
            return (
                <li className="single" key={id} onClick={this.handleGain.bind(this, id, index, loading, name, artists[0].name)}>
                    <img src={loading} alt="图片" className="artistImg" key={id} />
                    <div className="singDetil">
                        <h1 className="singTitle" style={{ color: "#ffcd32" }}>{name}</h1>
                        <span className="artistName" >{artists[0].name}</span>
                    </div>
                </li>

            )
        })
        return (
            <div>
                {/* 搜索框 */}
                <div className="search">
                    <img src={logo} alt="" className="icon-search" />
                    <input type="text" placeholder="搜索歌曲、歌手" value={value} className="ipt" onChange={this.handle.bind(this)} />
                    <span style={{ display: (value !== "") ? "block" : "none" }} onClick={this.handleInputClear.bind(this)}>
                        <img src={dele} alt="" className="icon-del" />
                    </span>
                </div>
                {/* 热搜关键字 */}
                <div className="hotkey" style={{ display: (value == "") ? "block" : "none" }}>
                    <h1 className="hotTitle">热门搜索</h1>
                    {/* 父组件callback方法 、值传给子组件 */}
                    < Hotkey callback={this.callback} value={this.state.value} />
                </div>
                {/* 搜索结果 */}
                <div className="searchResult_Show" style={{ display: (value !== "") ? "block" : "none" }}>
                    <h1 className="searchAll"><span style={{ color: "#ffcd32" }}>-^_^-</span>已加载完成<span style={{ color: "#ffcd32" }}>-^_^-</span></h1>
                    {/* 搜索结果列表 */}
                    <div className="showList">
                        <span className="searchList_tips">搜索
                        <span style={{ color: "#ffcd32" }}>"{value}"</span>,共找到
                        <span style={{ color: "#ffcd32" }}> {search.length}</span>首单曲</span>
                        {/* 渲染列表 */}
                        <ul className="lis">
                            {searchLis}
                        </ul>
                    </div>
                </div>
                {/* 音乐播放 */}
                {/* <div className="singlePlay">
                     <Audio src={songUrl}  id={1} play={this.play.bind(this)} isPlay={this.state.isPlay} autoPlay/>
                </div> */}
            </div>
        )
    }
}

export default Container